import {
  XInput,
  PopupRadio,
  XTextarea
} from 'vux'

export default {
  name: 'v-form',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    model: Object,
    options: Object
  },
  methods: {
    renderContent(h, item) {

    },
    createItem(h, item) {
      switch (item.type) {
        case 'input':
          return this.creatInput(h, item)
          break;
        case 'picker':
          return this.createPopupRadio(h, item)
          break;
        case 'textarea':
          return this.creatTextarea(h, item)
          break;

        default:
          return this.creatTest(h, item)
          break;
      }
    },
    creatInput(h, item) {
      return (
        <x-input class={item.readonly ? '' : 'edit'}
                 placeholder={item.placeholder}
                 required={item.required}
                 readonly={item.readonly} title={item.label}
                 v-model={this.model[item.prop]}></x-input>
      )
    },
    createPopupRadio(h, item) {
      const defaultOpt = item.defaultOpt || {
        key: "key",
        value: "value"
      }

      return (
        <popup-radio    title={item.label}  options={item.options} v-model={this.model[item.prop]}></popup-radio>
      )
    },
    creatTextarea(h, item) {
      return (
        <x-textarea placeholder={item.placeholder}  title={item.label} v-model={this.model[item.prop]}></x-textarea>
      )
    },
    creatTest(h, item) {
      var self = this
      return h(XInput, {
        props: {
          title: item.label,
          value: this.model[item.prop]
        },
        on: {
          ...this.$listeners,
          input: function (val) {
            self.model[item.prop] = val
          },
          'on-click-clear-icon': function (val) {
            console.log(val)
          }
        },
        directives: [

        ],
      })
    }
  },
  render(h) {
    return h('div', {
        staticClass: 'v-form',
        ref: 'vForm',

      }, this.items.map(item => {
        return h('group', {
          props: {
            ...this.options
          }
        }, [this.createItem(h, item)])
      })
    )
  },
  components: {
    XInput,
    PopupRadio,
    XTextarea
  }
}
